#{extends 'main.html' /}
#{set title:'Search Results' /}

#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery.fullcalendar.css'}">
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/javascripts/gmaps.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="http://www.google.com/jsapi" type="text/javascript" charset="${_response_encoding}" ></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCG9Kc_QV1stkM1sPMZqdkPmXfb47u_HFc&sensor=false" type="text/javascript" charset="${_response_encoding}"  ></script>
<script src="@{'/public/javascripts/jquery.fullcalendar.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{/set}

<div id="content" style="padding:0;">
<div id="main" style="margin: 0 auto;width:100%;">
    <form action="@{BingoSearch.results()}" method="get" style="overflow:hidden;padding-top:20px;padding-bottom:20px;width:650px;margin-top:10px;">
        <div style="text-align:center;">
            #{if query}
            <input type="text" name="query" class="search-query" style="margin: 0; width: 400px;float:left;" placeholder="Search" tabIndex="99" value="${query}" />
            #{/if}
            #{else}
            <input type="text" name="query" class="search-query" style="margin: 0; width: 400px;float:left;" placeholder="Search" tabIndex="99" />
            #{/else}
            <select id="typeSelected" name="type" style="width:130px;">
                <!--  <option value="All">All</option> -->
                <option value="Offer">Offers only</option>
                <option value="Request">Requests only</option>
            </select>
            <button type="submit" class="btn btn-primary" style="float:right;">Search</button>
        </div>
    </form>
    <h3>Results for <span id="query" style="font-style:italic;">${query}</span></h3>
    #{if filteredServices}
    <table style="width:700px;float:left;margin-left:0;">
        <thead>
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Type</th>
            </tr>
        </thead>
        <tbody>
        #{list items:filteredServices, as:'service'}
            <tr>
                #{if "Offer".equals(service.getType())}
                <td><a href="@{Offers.showDetails(service.id)}" rel="tooltip" data-placement="right" title="View details of the offer">${service.title}</a></td>
                #{/if}
                #{else}
                <td><a href="@{Requests.showDetails(service.id)}" rel="tooltip" data-placement="right" title="View details of the request">${service.title}</a></td>
                #{/else}
                <td>${service.description}</td>
                <td>${service.getType()}</td>
            </tr>
        #{/list}
        </tbody>
    </table>
    #{/if}
    #{else}
    <p style="margin:10px 0 20px 0">No results found.</p>
    #{/else}
</div>
</div>

<br>

<script type="text/javascript">
$(document).ready(function() {
	$("*[rel=tooltip]").tooltip();
	#{if type}
	$("#typeSelected").val("${type}");
	#{/if}
});
</script>